<template>
  <div>
    
    <div>
      <!-- 查询表单 -->
    <Form ref="searchForm" :model="searchForm" inline>
        <FormItem prop="name">
            <Input type="text" v-model="searchForm.name" placeholder="请输入姓名">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>

        <FormItem prop="level">
            <Select v-model="searchForm.level" placeholder="请修则教师头衔" style="width: 150px">
                <Option value="1">高级教师</Option>
                <Option value="2">特技教师</Option>
            </Select>
        </FormItem>

        <FormItem prop="date">
            <DatePicker 
                type="date" 
                placeholder="入职时间后" 
                v-model="searchForm.begin"
                style="width: 200px"
            >
            </DatePicker>
        </FormItem>

        <FormItem prop="date">
            <DatePicker 
                type="date" 
                placeholder="入职时间前" 
                v-model="searchForm.end"
                style="width: 200px"
            >
            </DatePicker>
        </FormItem>

        <FormItem>
            <Button type="primary" icon="ios-search" @click="getTableData">查询</Button>
        </FormItem>

        <FormItem>
            <Button type="error" @click="clearForm">清空</Button>
        </FormItem>

        <Button type="primary" @click="add" style="float:right">新增教师</Button>
    </Form>
    </div>

    <div>
      <!-- 教师表格 -->
      <Table border :columns="columns" :data="data"></Table>
    </div>
    
    <div align="center" style="margin:20px 0">
          <!-- 分页 -->
        <Page 
          class="page"
          :total="total"
          :current="current" 
          :page-size="pageSize"  
          @on-change="pageNoChange"
          @on-page-size-change="pageSizeChange"
          :page-size-opts="pagesizeopts"
          show-sizer
          show-total
        />
    </div>


    <Drawer
            title="新增/编辑教师"
            v-model="showDrawer"
            width="500"
            :mask-closable="false"
            :styles="styles"
        >
            <Form :model="formData">
                <FormItem label="教师姓名" label-position="top">
                    <Input v-model="formData.name" placeholder="please enter teacher name" />
                </FormItem>
 
                <FormItem label="教师简介" label-position="top">
                    <Input type="textarea" v-model="formData.intro" :rows="4" placeholder="please enter the intro" />
                </FormItem>

                <FormItem label="教师资历" label-position="top">
                    <Input type="textarea" v-model="formData.career" :rows="4" placeholder="please enter the career" />
                </FormItem>
    
                <FormItem label="教师职称" label-position="top">
                    <Select v-model="formData.level" placeholder="please choose the level">
                        <Option v-for="item in teacherLevel" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
        
                <FormItem label="教师图片" label-position="top">
                    <Input v-model="formData.avatar" placeholder="please enter teacher picture" />
                    <br>
                    <p>（有空了设计一个上传图片的功能）</p>
                    <p>（现在先使用输入框代替）</p>
                </FormItem>
            
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="showDrawer = false">取消</Button>
                <Button type="primary" @click="submit">提交</Button>
            </div>
        </Drawer>   

         <!--删除选择框  -->
         <Modal
            width=450
            v-model="deleteModal"
            title="是否删除教师"
            @on-ok="ok(teacherId)"
            @on-cancel="cancel">
            <p>教师姓名：<strong style="color:red">{{teacherName}}</strong</p>
            <br>
            <br>

            <p>这只是一个逻辑删除，请放心！</p>
            
        </Modal>
    
  </div>
</template>
<script>
export default {
        data () {
            return {
                columns: [
                    {
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '简介',
                        key: 'intro'
                    },
                    {
                        title: '资历',
                        key: 'career'
                    },
                    {
                        title: '职称',
                        key: 'level',
                        render: (h, params) => {
                          if(params.row.level==1){
                            return h('div',"高级教师")
                          }
                          else{
                            return h('div',"特级教师")
                          }
                        }
                    },
                    {
                        title: '入职时间',
                        key: 'gmtCreate',
                        sortable: true,
                        // render: (h, params) => {
                        //     return h('span', {
                        //     }, this.$dateFormat(params.row.gmtCreate))
                        // }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [
                    {
                        name: '刘一',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-10-30 11:53:03'
                    },
                    {
                        name: '陈二',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 2,
                        gmtCreate: '2019-11-1 11:53:03'
                    },
                    {
                        name: '张三',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 2,
                        gmtCreate: '2019-11-2 11:53:03'
                    },
                    {
                        name: '李四',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-11-3 11:53:03'
                    },
                    {
                        name: '王五',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-11-4 11:53:03'
                    },
                    {
                        name: '赵六',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 2,
                        gmtCreate: '2019-11-5 11:53:03'
                    },
                    {
                        name: '孙七',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-11-6 11:53:03'
                    },
                    {
                        name: '周八',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-12-1 11:53:03'
                    },
                    {
                        name: '吴九',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-12-2 11:53:03'
                    },
                    {
                        name: '郑十',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-12-3 11:53:03'
                    },
                    {
                        name: '魔一十一',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-12-22 11:53:03'
                    },
                    {
                        name: '小十二',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2019-12-27 11:53:03'
                    },
                    {
                        name: '燕十三',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2020-10-30 11:53:03'
                    },
                    {
                        name: '石破天',
                        intro: '高级讲师简介',
                        career: '高级讲师资历',
                        level: 1,
                        gmtCreate: '2022-10-30 11:53:03'
                    }

                ],
                current:1,
                pageSize:10,
                total:null,
                pagesizeopts:[5, 10, 20,50],
                searchForm: {
                    
                },

                //删除选择框
                deleteModal: false,
                teacherName: '',
                teacherId:'',

                //测边框显示
                showDrawer: false,
                 styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },

                //判断save or edit
                editControl:true,

                formData: {
                    id:'',
                    name: '',
                    intro: '',
                    career: '',
                    level: '',
                    avatar: '',
                    sort: ''
                },

                //教师职称选择
                teacherLevel:[
                    {
                        value:1,
                        label:"高级教师"
                    },
                    {
                        value:2,
                        label:"特技教师"
                    }
                ]


                //用户名密码校验
                // ruleInline: {
                //     user: [
                //         { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                //     ],
                //     password: [
                //         { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                //         { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                //     ]
                // }
            }
        },

        created(){
          //页面渲染之前执行
          this.getTableData();
          console.log(this.searchForm.date)
        },

        methods: {
            //删除页面
            remove (row) {
                // this.data.splice(index, 1);
                // this.$Message.warning("虚假的删除,重新加载页面即可恢复")
                this.deleteModal=true,
                this.teacherName=row.name,
                this.teacherId=row.id
            },
            ok(id){
                this.$put("/teacher/delTeacher/"+id)
                .then(res=>{
                    if(res.data.data){
                        this.$Message.info("删除成功");
                        this.getTableData();
                    }
                })
            },
            cancel(){

            },

            

            // 页码变化
            pageNoChange (val) {
              this.current = val;
              this.getTableData();
            },
            // 每页条数变化
            pageSizeChange (val) {
              this.current = 1;
              this.pageSize = val;
              this.getTableData();
            },

            //查询教师信息
            queryTeachers(){
                // todo查询条件
                this.$get("/teacher/queryTeachers",{
                    name:this.searchForm.name,
                    level:this.searchForm.level,
                    begin:this.searchForm.begin,
                    end:this.searchForm.end,
                    size:this.pageSize,
                    page:this.current
                })
                .then(res=>{
                    if(res.data.data){
                        this.data=res.data.data
                    }
                })
            },

            //查询教师总数
            queryCount(){
                this.$get("/teacher/getCount",{
                    name:this.searchForm.name,
                    level:this.searchForm.level,
                    begin:this.searchForm.begin,
                    end:this.searchForm.end
                })
                .then(res=>{
                    if(res.data.data){
                        console.log(res.data.data)
                        this.total = res.data.data
                    }
                })

            },
            //表格数据
            getTableData(){
                this.queryTeachers();
                this.queryCount();
            },

            //清空搜索条件
            clearForm(){
              this.searchForm={};
            },

            //详情页面
            show (row) {
                //打开侧边栏
                this.showDrawer=true
                //详情赋值
                // this.formData=row
                this.$get("/teacher/queryOne/"+row.id)
                .then(res=>{
                    if(res.data.data){
                        this.formData=res.data.data
                    }
                })
                //认为是编辑
                this.editControl=true
            },
            //新增教师
            add(){
                //清缓存
                this.formData={},
                this.showDrawer=true
                //认为是新增
                this.editControl=false
            },

            //编辑教师
            editTeacher(){
                this.$put("/teacher/editTeacher",this.formData)
                .then(res=>{
                    if(res.data.data){
                        this.$Message.success("修改成功")
                    }
                })
            },

            //新增教师
            saveTeacher(){
                this.$post("/teacher/saveTeacher",this.formData)
                .then(res=>{
                    if(res.data.data){
                        this.$Message.success("新增成功")
                    }
                })   
            },

            // 侧边栏提交，判断是修改，还是新增
            submit(){
                if(this.editControl){
                    this.editTeacher()
                    
                }else{
                    this.saveTeacher()
                }
                this.showDrawer = false;
                this.getTableData();
                
            }

                
        }
    }

</script>
<style>
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
</style>


<!-- 单个日期选择
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
<DatePicker 
    v-model="searchForm.date"
    type="daterange" 
    placement="bottom-end" 
    placeholder="选择老师入职时间"
    style="width: 200px"
    >
</DatePicker>
-->